<template>
  <div>
    <el-form ref="form" :model="form"  :rules="rules" label-width="80px" class="login-box">
      <h1 class="login-title"> 欢迎登陆</h1>
      <el-form-item label="账号：" prop="name">
        <el-input v-model="form.name"></el-input>
      </el-form-item>
      <el-form-item label="密码：" prop="password">
        <el-input type="password" v-model="form.password"></el-input>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="login('form')">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item>

    </el-form>


  </div>
</template>

<script>
  export default {
    name: "Login.vue",

    data() {
      return {
        form: {
          name: '',
          password: ''
        },
        rules:{

          name: [
            { required: true, message: '请输入账号', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ],

          password: [
            { required: true, message: '请输入密码', trigger: 'blur' },
            { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
          ]



        }
      }
    },
    methods: {
      login:function(formname) {

        this.$refs[formname].validate((valid) =>{
          if(valid){
            // 设置用户登录成功
            sessionStorage.setItem('isLogin', 'true');
            this.$store.dispatch("asyncUpdateUser",this.form)
            this.$router.push("/main")
          }else {
            this.$message.error('请填入完整信息');
          }


        })


      }
    }
  }


</script>

<style scoped>

  .login-title{

    text-align:  center;
  }
  .login-box{
    width: 600px;
    border: 1px  solid #409EFF;
    padding: 20px 50px 20px 20px ;
    margin: 0 auto;
    border-radius: 8px;
    text-align: left;
    box-shadow: 0 0 20px;



  }



</style>
